<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统一身份认证平台</title>
    <!-- 引入vue element 使用所需jar包 -->
    <link rel="stylesheet" href="../plugins/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../css/loginRegister.css">
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../plugins/element-ui/lib/index.js"></script>
    <link rel="icon" href="../img/favicon.ico" type="image/x-icon"> <!-- 确保 favicon 格式正确 -->
</head>

<body>
<div id="app" class="container" >
    <div class="header">
        <img src="../img/logo1.png" alt="华北水利水电大学">
        <span> | </span>
        <span>文体会堂预约系统</span>
    </div>
    <div class="login-bg">
        <div class="login-box">
            <h2>统一身份认证平台</h2>
            <el-form ref="form" :model="user" label-width="80px">
                <el-form-item label="账号：">
                    <el-input v-model="user.userId" placeholder="学号/工号"></el-input>
                </el-form-item>
                <el-form-item label="密码：">
                    <el-input placeholder="密码" v-model="user.password" show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" class="login-button">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>
<div class="footer">
    版权所有：华北水利水电大学 | 豫ICP备05002494-1 | 豫公网安备 41010702002321号
</div>

<script>
    new Vue({
        el:"#app",
        data(){
            return {
                user:{
                    userId:"",
                    password:""
                }

            }
        },
        methods: {
            onSubmit() {
                const url = "/logins";
                axios.post(url,this.user).then((resp)=>{
                    if(resp.data.msg =="success"){
                        this.loginSuccessPromptMsg();
                        localStorage.setItem('userId', this.user.userId);
                        window.setTimeout(() => {
                            window.location.href = "/pages/loginIndex.html";
                        }, 1000);
                    }else{
                        this.userInfoRrr();
                    }
                })
            },
            loginSuccessPromptMsg() {
                this.$message({
                    message: '登录成功',
                    type: 'success'
                })
            },
            userInfoRrr() {
                this.$message.error('账号或密码错误，请检查错误后重试');
            }
        }
    })


</script>


<script>
    // 背景图片数组
    const backgrounds = [
        '../img/background1.jpg',
        '../img/background2.jpg',
        '../img/background3.jpg',
        '../img/background4.jpg'
    ];

    // 背景切换函数
    function changeBackground() {
        const body = document.body;
        const index = Math.floor(Math.random() * backgrounds.length);
        body.style.backgroundImage = `url('${backgrounds[index]}')`;
        body.style.backgroundPosition = 'left'; // 设置背景图片位置为左侧
        body.style.backgroundSize = 'cover'; // 确保背景图片覆盖整个屏幕
        body.style.transition = 'background-position 1s ease-in-out'; // 设置动画效果
        body.style.backgroundRepeat = 'no-repeat'; // 防止背景图片重复
    }

    // 每5秒切换一次背景
    setInterval(changeBackground, 3000);

    // 页面加载时立即切换一次背景
    window.onload = changeBackground;
</script>
</body>
</html>